<!--智慧消防V1.0-info页面-->
<template>
    <div class="app-container" ref="content">
        <div style="text-align: center;padding: 10px">{{enterpriseInfo.enterpriseName}}-详情信息</div>
<!--        <div style="text-align: center">-->
<!--            <el-button @click="getFireDistance">距离计算</el-button>-->
<!--        </div>-->
        <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :md="24" :lg="5" :xl="5">
                <div style="text-align: center">
                  <el-image v-if="enterpriseInfo.logo"
                            style="width: 150px; height: 150px"  class="avatar"
                      :src="enterpriseInfo.logo"
                      fit="fill" :preview-src-list="[enterpriseInfo.logo]">
                  </el-image>
                  <i v-else class="el-icon-picture-outline avatar-uploader-icon"></i>
                    <div style="line-height: 44px">*主体logo*</div>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                <el-form v-model="enterpriseInfo">
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="主体名称" prop="name">
                            {{enterpriseInfo.name}}
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="主体类型 " prop="dominantType">
                            {{enterpriseInfo.dominantType | enterpriseType}}
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="主体负责人" prop="contacts">
                            {{enterpriseInfo.contacts}}
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="负责人电话" prop="mobile">
                            {{enterpriseInfo.mobile}}
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="主体固话" prop="tel">
                            {{enterpriseInfo.tel}}
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="省市县" prop="enterpriseLocation">
                            {{enterpriseInfo.province+enterpriseInfo.city+enterpriseInfo.county}}
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="详细地址" prop="address">
                            {{enterpriseInfo.address}}
                        </el-form-item>
                    </el-col>

                  <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                    <el-form-item label="责任人:" prop="userName">
                      {{ enterpriseInfo.userName }}
                    </el-form-item>
                  </el-col>
                </el-form>

                <div style="margin-top: 10px">
                    <baidu-map class="map-view" map-type="BMAP_HYBRID_MAP"  :center="{lng: enterpriseInfo.longitude, lat: enterpriseInfo.latitude}" :zoom="15" :scroll-wheel-zoom="true">
                        <bm-marker :position="{lng: enterpriseInfo.longitude, lat: enterpriseInfo.latitude}" :dragging="false" animation="BMAP_ANIMATION_BOUNCE">
                            <bm-label :content="enterpriseInfo.name" :labelStyle="{color: 'red', fontSize : '12px'}" :offset="{width: 0, height: 30}"/>
                        </bm-marker>
                    </baidu-map>
                </div>
            </el-col>
        </el-row>

        <el-table v-if="ifireList.length>0" :data="ifireList" style="width: 100%">
            <el-table-column
                    prop="name"
                    label="消防名称">
            </el-table-column>
            <el-table-column
                    prop="userDistance"
                    label="距离">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import {getFireDistance, getInEnterpriseDominantVo, getInUserList} from "@/api/enterprise";

export default {
    name: "info",
    data(){
        return{
            enterpriseInfo:{},
            ifireList:[],
            userList:[]
        }
    },
    created() {
      this.getInUserList()
        this.$nextTick(() => {
            this.getInEnterpriseDominantVo(this.$route.params.ucId)
        });
    },
    methods:{
        getFireDistance(){
            getFireDistance({ucId:this.enterpriseInfo.ucId}).then(res=>{
                this.ifireList = res.data
            })
        },
        getInEnterpriseDominantVo(val){
            //获取企业信息数据
            let loadingInstance = this.$loading({
                target:this.$refs.content,
                text:'数据加载中'
            });
            getInEnterpriseDominantVo({ucId:val}).then(res=>{
                console.log(res)
                this.enterpriseInfo = res.data
                loadingInstance.close()
                this.$notify.success({
                    title: '成功',
                    message: "获取主体信息成功"
                })
            }).catch(error=>{
                console.log(error)
                loadingInstance.close()
                this.$notify.error({
                    title: '失败',
                    message: "获取主体信息失败"
                })
            })
        },
      getInUserList(){
        getInUserList({deleted:false}).then(res=>{
          this.userList = res.data
        }).catch(error=>{
          alert("获取用户列表失败")
        })
      },
    }
}
</script>

<style>
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 149px;
    height: 149px;
    line-height: 149px;
    text-align: center;
}
.avatar {
    width: 149px;
    height: 149px;
    display: block;
    margin: 0 auto; /*水平居中*/
}
.map-view{
    width: 100%;
    height: 400px;
}
</style>
